<template>
  <div>
    <div class="mainpage">
      <!-- 左侧 -->
      <div class="left-body">
        <router-view></router-view>
        <!-- <main-subject></main-subject> -->
      </div>
      <!-- 右侧 -->
      <div class="right-body">
        <div class="one">
          <div @click="writeTopic()">
            <img src="../../assets/img/article.png" >
            <p>话题发布</p>
          </div>
          <div @click="wenti()">
            <img src="../../assets/img/wenti1.png" >
            <p>问题发布</p>
          </div>
          <div @click="replyQuection()">
            <img src="../../assets/img/article.png" >
            <p>写回答</p>
          </div>
        </div>
        <div class="two">
          <div @click="yihuo()" class="two-1">
            <img src="../../assets/img/you1.png" >
          </div>
          <div class="twos">
            <div class="two-2">
            <img src="../../assets/img/fufei1.png" @click="fufei()">
            <p>付费咨询</p>
          </div>
          <div class="two-2">
            <img src="../../assets/img/baike.png" @click="baike()" >
            <p>百科</p>
          </div>
          </div>
          
        </div>
        <div class="three">
          <div>
            <img src="../../assets/img/you2.png" @click="you2()">
          </div>
        </div>
        <div class="four" style="background:#f6f6f6">
          <p>邮箱 1159416234@qq.com</p>
          <p>联系方式 15225412074</p>
          <p>版权信息：Copyright [dates] by [author/owner]</p>
          <p>版权所有 侵权必究</p>
          <p>洛公网安备 1101111122235 号</p>
          <p>违法和不良信息举报：010-8271645555</p>
          <p>儿童色情信息举报专区</p>
          <p>联系我们 © 2021 论坛</p>
        </div>
      </div>

      <div>
        <el-dialog
      title="提问"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <div style="margin-bottom: 10px">
          <!-- <el-button class="submitTopic" type="primary" @click="submit">提交</el-button> -->
          <el-input placeholder="请输入内容" v-model="title">
            <template slot="prepend">标题</template>
          </el-input>
        </div>
        <!-- 直接隐藏掉就好了，用功能不用样式 -->
        <el-upload
          v-show="false"
          id="quill-upload"
          action="http://localhost:8080/uploadimg"
          name="upload_file"
          multiple
          :limit="3"
          list-type="picture"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-error="uploadError"
          :on-success="handleExceed"
        >
          <el-button size="small" type="primary"></el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <el-row v-loading="uillUpdateImg">
          <quillEditor
            ref="myQuillEditor"
            @change="onEditorChange($event)"
            v-model="value"
            :options="editorOption"
          />
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closetiao">取 消</el-button>
        <el-button type="primary"  @click="submit">确 定</el-button>
      </span>
    </el-dialog>
      </div>

    </div>
  </div>

</template>
<script>
import { quillEditor } from "vue-quill-editor";
import {insertIssue} from "../../api/issue"
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import MainSubject from './MainSubject.vue'
export default {
  components: { quillEditor },
  name:"MainPage",
  data() {
    return {
      dialogVisible: false,
      title: "",
      uillUpdateImg: false, //根据图片上传状态来确定是否显示loading动画
      serverUrl: "", //上传的图片服务器地址
      // value: this.content, //富文本内容
      value: "",
      editorOption: {
        //符文本编辑器的配置
        placeholder: "",
        theme: "snow",
        modules: {
          toolbar: {
            container: [
              // 工具栏配置, 默认是全部
              ["bold"],
              ["italic"],
              ["underline"],
              ["strike"],
              [{ list: "ordered" }, { list: "bullet" }],
              ["blockquote"],
              ["code-block"],
              ["link"],
              ["image"],
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  // 给个点击触发Element-ui，input框选择图片文件
                  document.querySelector("#quill-upload input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
    };
    
  },
  methods: {
    writeTopic() {
      this.$router.push("/writetopic")
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.title=''
          this.value=''
        })
        .catch((_) => {});
    },
    closetiao(){
      var that = this
      that.title=''
      that.value=''
      that.dialogVisible=false
    },
    wenti(){
        this.dialogVisible=true
    },
    //添加问题
    submit() {
      var that = this
      var data = {
        title: this.title,
        content: this.value,
        uid: localStorage.getItem("uid")
      };
      insertIssue(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.$message.success(res.mess)
          that.dialogVisible=false
          that.title=''
          that.value=''


          // that.$router.push("/")
        } else {
          that.$message.error(res.mess)
        }
      });
    },
    // 写回答
    replyQuection() {
      this.$router.push("/question")
    },
    //图片
    yihuo(){
      window.location.assign("https://www.zhihu.com/xen/market/ecom-page/1363565724217311232")
    },
    //付费
    fufei(){
      window.location.assign("https://www.zhihu.com/consult")
    },
    //百科
    baike(){
      window.location.assign("https://www.zhihu.com/wiki")
    },
    //右二图
    you2(){
      window.location.assign("https://www.fit2cloud.com/metersphere/index.html")
    },

    // **************************************************************************************
    onEditorChange({ quill, html, text }) {
      //富文本编辑器内容发生改变的时候
      this.value = html;
      // this.$emit("textChange", html); //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改
      console.log(this.value);
    },
    beforeUpload() {
      //上传图片之前开启loading
      this.uillUpdateImg = true;
    },
    uploadError() {
      //图片上传失败,关闭loading
      this.uillUpdateImg = false;
      this.$message.error("图片插入失败");
    },
    handleExceed(response, file, fileList) {
      //图片添加成功
      let quill = this.$refs.myQuillEditor.quill;
      console.log(response);
      if (response.code === 200) {
        let length = quill.getSelection().index;
        // 插入图片 response.data.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", response.data);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
      this.fileList = fileList;
      this.uillUpdateImg = false;
    },
  }
}
</script>
<style scoped>
.mainpage{
  min-height: 600px;
  width: 70%;
  /* background: red; */
  /* border:solid 2px red ; */
  margin: 0 auto;
  display: flex;
}
.one >div >img{
  width: 40px;
  height: 40px;
}
.left-body{
  flex: 5;
  max-width: 800px;
  margin-right: 10px;
}
.right-body{
  min-width: 300px;
  height: 500px;
  flex: 2;
}
.right-body > div{
  margin-bottom: 10px;
  background: #ffffff;
}
/* 右侧 第一部分 -----------------------------START---------*/
.one{
  /* height: 100px; */
  padding: 10px 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.one > div{
  flex: 1;
  /* padding: 10px 0px 0px 0px; */
  text-align: center;
  /* border: 1px solid black; */
}
.one  p{
  margin-top: 10px;
}
/* 右侧 第一部分 -----------------------------END---------*/
/* 右侧 第二部分 -----------------------------START---------*/
/* .two{
  height: 80px;
} */
.twos{
  padding: 10px 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.two-1 >img{
  width: 100%;
  flex: 1;
  /* height: 40px; */
}
.two-2 >img{
  width: 40px;
  height: 40px;
  flex: 1;
}
/* 右侧 第二部分 -----------------------------END---------*/
/* .three{
  height: 80px;
} */
.three >div>img{
  width: 100%;
}

.four{
  height: 200px;
}
.four>p{
  margin: 5px 0px 0px 5px;
  font-size: 13px;
    line-height: 2;
    color: #8590a6;
}
</style>